<!-- 聊天界面 组件 -->
<template>
	<view>
		<!-- 聊天列表 -->
		<!-- :style="'height:' + scrollH + 'px'" -->
		<scroll-view
			scroll-y="true"
			style="position: absolute;top: 0;left: 0;right: 0;bottom: 100rpx;"
			:scroll-into-view="scrollInto"
			scroll-with-animation
		>
			<!-- 聊天用户 消息 -->
			<block v-for="(item, index) in list" :key="index">
				<view :id="'chat' + index">
					<!-- 引入 用户聊天框消息 组件
				 pretime上一条的时间，如果"index >0 不是第一条消息了" 
				 list[index-1 上一条].create_time 的时间，否则就是0
				 -->
					<userChartList
						:item="item"
						:index="index"
						:pretime="index > 0 ? list[index - 1].create_time : 0"
					></userChartList>
				</view>
			</block>
		</scroll-view>
		<!-- 底部 聊天条 -->
		<chatSend @chatSubmit="chatSubmit"></chatSend>
	</view>
</template>

<script>
	// 引入 用户聊天框消息 组件
	import userChartList from '@/components/user-chat/user-chart-list.vue';
	// 引入底部 输入框 ，发送按钮 组件
	import chatSend from '@/components/user-chat/chat-send.vue';
	export default {
		components: { userChartList, chatSend },
		data() {
			return {
				// 聊天列表高度
				// scrollH: 600,
				// 聊天消息列表数据
				list: [
					// {
					// 	user_id: 2,
					// 	avatarImg: '/static/default.jpg',
					// 	username: '昵称', // 昵称
					// 	data: '今天干啥呢', // 内容
					// 	type: 'text', // image类型，video类型，text文本类型
					// 	create_time: 1679933733, // 发送时候，的时间戳
					// }
					],
				// 设置 聊天气泡，进入页面滚到底部
				scrollInto: '',
			};
		},
		// 页面加载时 ---------------------------------------------------
		onLoad(e) {
			if(!e.user){
				uni.navigateBack({
					delta:1
				})
				return uni.showToast({
					title:'聊天对象不存在',
					icon:'none'
				})
			}
			// 聊天对象存在
			let ToUser = JSON.parse(e.user)
			// 创建聊天对象
			this.$store.commit('createToUser',ToUser)
			// 获取当前聊天对象 的聊天记录
			this.$store.dispatch('getChatDetailToUser').then(list=>{
				console.log('[user-chat]获取当前聊天对象的，聊天记录',list);
				this.list = list
			})
			// 开启监听接收聊天信息
			uni.$on('UserChat',(res)=>{
				console.log('[user-chat]接收聊天信息',res);
				if(res.from_id===ToUser.user_id){
					this.renderPage({
						data:res,
						send:false
					})
				}
			})
		},
		// 页面加载完成 --------------------------------------------------------
		onReady() {
			// 滚动到 聊天气泡底部
			this.pageToBottom();
		},
		// 页面销毁钱
		beforeDestroy() {
		 	// 关闭聊天对象
			this.$store.commit('closeToUser')
			// 移除监听聊天信息事件
			uni.$off('UserChat',()=>{})
		},
		// 存放所有事件 -------------------------------------------------
		methods: {
	    // 渲染到页面
		renderPage(e){
			this.$store.dispatch('formatChatDetailObject',e).then(msg=>{
				this.list.push(msg)
				// 滚动到底部
				this.pageToBottom();
			})
		},
		// 发送
		async chatSubmit(data) {
				// 组织发送的数据 格式
				let result = await this.$store.dispatch('sendChatMessage',{
					data,
					type:'text'
				})
				// 请求发送接口
				this.$H.post('/chat/send',result,{
					token:true
				}).then(res=>{
					this.renderPage({
						data:result,
						send:true
					})
				})
				// let obj = {
				// 	user_id: 1,
				// 	avatarImg: '/static/demo/userpic/6.jpg',
				// 	username: '自己', // 昵称
				// 	type: 'text', // image类型，video类型，text文本类型
				// 	data: data, // 内容
				// 	create_time: new Date().getTime(), // 发送时候，的时间戳
				// };
				// this.list.push(obj);
				// // 发送消息后，滚动到底部
				// setTimeout(()=>{
				// 	this.pageToBottom();
				// },500)
			},
			// 滚动到底部
			pageToBottom() {
				setTimeout(()=>{
					// 获取到最后一个元素的 索引值
					let lastIndex = this.list.length - 1;
					// 如果 聊天气泡没有元素 ，直接终止
					if (lastIndex < 0) return;
					// scrollInto 设置那个方向可滚动，则滚动到该元素位置
					// 这里是 聊天气泡 的最后一条消息
					this.scrollInto = 'chat' + lastIndex;
				},300)
			},
		},
	};
</script>

<style lang="scss"></style>
